import React, { useEffect } from "react";
import styles from "./index.module.less";
import Record from "../record";
import { connect } from "react-redux";
import { consumeDetailsAction } from "@redux/actions";

const headerTitle = [
    "消费时间",
    "订单号",
    "商品名称",
    "花费G币",
    "消费渠道",
    "订单状态",
];

const numbersOnePage = 20; // 限定一页最多存在20条数据

const ConsumerDetails = (props) => {
    const { consumeDetailsAction, rec2 } = props;

    useEffect(() => {
        consumeDetailsAction(1, 2, 20);
    }, [consumeDetailsAction]);

    return (
        <div className={styles.consumer_details}>
            <Record
                headerTitle={headerTitle}
                type={2}
                rec2={rec2}
                numbersOnePage={numbersOnePage}
                totalPages={Math.ceil(
                    rec2.consumeDetails.length / numbersOnePage
                )}
            />
        </div>
    );
};

export default connect((state) => ({ rec2: state.consumeDetailsReducer }), {
    consumeDetailsAction,
})(ConsumerDetails);
